{% extends "_layouts/examples.html" %}
{% block title %}Matrix{% endblock %}

{% block standalone_css %}patterns_matrix{% endblock %}

{% block content %}
<ul class="p-matrix">
  <li class="p-matrix__item">
    <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/60d9b81e-picto-canonical.svg" alt="">
    <div class="p-matrix__content">
      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Canonical</a></h3>
      <div class="p-matrix__desc">
        <p>Canonical is the global software company behind Ubuntu and is the number-one Ubuntu services provider</p>
      </div>
    </div>
  </li>
  <li class="p-matrix__item">
    <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/c4f35e06-products-hero-ubuntu.svg" alt="">
    <div class="p-matrix__content">
      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Ubuntu</a></h3>
      <div class="p-matrix__desc">
        <p>The world’s most popular Linux for servers, desktops and things, with enterprise support and enhanced security by Canonical</p>
      </div>
    </div>
  </li>
  <li class="p-matrix__item">
    <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/0de4fcd5-logo-maas-icon.svg" alt="">
    <div class="p-matrix__content">
      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">MAAS</a></h3>
      <p class="p-matrix__desc">Create a bare-metal cloud with Metal as a Service for IPAM and provisioning</p>
    </div>
  </li>
  <li class="p-matrix__item">
    <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/3dee82a5-landscape-logo_smaller.svg" alt="">
    <div class="p-matrix__content">
      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Landscape</a></h3>
      <div class="p-matrix__desc">
        <p>Systems management for Ubuntu - updates, package management, repositories, security, and regulatory compliance dashboards</p>
      </div>
    </div>
  </li>
  <li class="p-matrix__item">
    <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/6d382a53-image-juju-256.svg" alt="">
    <div class="p-matrix__content">
      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Juju</a></h3>
      <p class="p-matrix__desc">Model-driven multi-cloud operations for applications. On-premise or on-cloud SAAS app store, with big data, k8s and openstack solutions</p>
    </div>
  </li>
  <li class="p-matrix__item">
    <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/fffc8205-lxd-logo_smaller.svg" alt="">
    <div class="p-matrix__content">
      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">LXD</a></h3>
      <p class="p-matrix__desc">A pure-container hypervisor. Replace legacy app VMs with containers for speed and density</p>
    </div>
  </li>
  <li class="p-matrix__item">
    <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/19c7461a-snapcraft-primary-icon--dark.svg" alt="">
    <div class="p-matrix__content">
      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Snaps</a></h3>
      <div class="p-matrix__desc">
        <p>A single secure package and auto-update system for Ubuntu, Debian, Arch, Centos, Amazon Linux</p>
      </div>
    </div>
  </li>
  <li class="p-matrix__item">
    <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/a7916513-picto-openstack.svg" alt="">
    <div class="p-matrix__content">
      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">OpenStack</a></h3>
      <div class="p-matrix__desc">
        <p>The world’s first choice for OpenStack - the leader in density and cost per VM</p>
      </div>
    </div>
  </li>
  <li class="p-matrix__item">
    <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/b81a45e4-kubernetes.svg" alt="">
    <div class="p-matrix__content">
      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Kubernetes</a></h3>
      <div class="p-matrix__desc">
        <p>Canonical works with Google GKE and Azure AKS for app portability between private and public infrastructure</p>
      </div>
    </div>
  </li>
</ul>
{% endblock %}
